<template>
  <div class="friendSpace">
    <div class="top">
      <el-button class="button1">在线</el-button>
      <el-button class="button1">全部</el-button>
      <el-button class="button1">待定</el-button>
      <el-button class="button1">已屏蔽</el-button>
      <el-button
        class="button1"
        style="background-color: #08d671"
        @click="
          addFriendVisable = true;
          addFriendCard = []; //清空上一次查询结果
          addMail = '';
        "
      >
        添加好友
      </el-button>

      <el-dialog v-model="addFriendVisable" title="添加好友">
        <el-form>
          <el-form-item label="Friend Name">
            <el-input v-model="addName"></el-input>
          </el-form-item>
        </el-form>
        <el-menu style="overflow-y: scroll; height: 185px">
          <el-menu-item
            v-for="(item, i) in addFriendCard"
            :key="i"
            class="addFriendCard"
          >
            <img class="avatar_addCard" :src="item.avatar" />
            <p class="name">{{ item.name }}</p>
            <el-button class="addButton" @click="addFriend(item)"
              >添加</el-button
            >
          </el-menu-item>
        </el-menu>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="searchFriend">搜索</el-button>
          </span>
        </template>
      </el-dialog>

      <el-button class="button1" @click="getFriendRequest">
        查看最近请求
      </el-button>

      <el-dialog v-model="requestFriendVisable" title="好友请求">
        <el-menu style="overflow-y: scroll; height: 185px">
          <el-menu-item
            v-for="(item, i) in requestFriendCard"
            :key="i"
            class="addFriendCard"
          >
            <img class="avatar_addCard" :src="item.users.avatar" />
            <p class="name">{{ item.users.name }}</p>
            <el-button class="addButton2" @click="byFriendRequest(item)"
              >接受</el-button
            >
            <el-button class="addButton">拒绝</el-button>
          </el-menu-item>
        </el-menu>
      </el-dialog>
    </div>

    <div class="friendList">
      <el-menu style="background-color: #454545">
        <el-menu-item
          class="friendListCard"
          v-for="(item, i) in friendList"
          :key="i"
          @dblclick="chat(item)"
        >
          <div>
            <img class="avatar_friendCard" :src="item.avatar" />
            <p class="name">
              {{ item.name }}
            </p>
          </div>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<style scoped>
p {
  text-decoration: none;
}
.top {
  top: 0;
  height: 50px;
  border-bottom: 1px #353535;
  border-bottom-style: solid;
}
.button1 {
  margin: 6px;
  height: 35px;
  background-color: #454545;
  border: 0;
}

.friendSpace {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  left: 305px;
  background-color: #454545;
}

.friendListCard {
  border-radius: 9px;
}
.avatar_friendCard {
  vertical-align: middle;
  width: 45px;
  border-radius: 12px;
}
.friendList {
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}

.addFriendCard {
  margin-bottom: 15px;
  background-color: #555555;
  border-radius: 9px;
}
.avatar_addCard {
  vertical-align: middle;
  width: 45px;
  border-radius: 15px;
}
.name {
  margin: 0 0 0 22px;
  display: inline-block;
  font-weight: bolder;
  font-size: large;
}
.addButton {
  position: absolute;
  top: 12%;
  height: 76%;
  right: 15px;
  background-color: #08d671;
  border: 0;
}
.addButton2 {
  position: absolute;
  top: 12%;
  height: 76%;
  right: 95px;
  background-color: #08d671;
  border: 0;
}
</style>

<script>
import { useStore } from "vuex";
import { onMounted, ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const store = useStore();

    //获取好友列表
    const friendList = ref([]);
    const getFriendList = async () => {
      // friendList.value = [
      //   {
      //     id: "12",
      //     name: "LiJianfeng",
      //     avatar:
      //       "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      //   {
      //     id: "13",
      //     name: "AoWei",
      //     avatar:
      //       "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      //   {
      //     id: "14",
      //     name: "None",
      //     avatar:
      //       "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      //   {
      //     id: "15",
      //     name: "GirlFriend",
      //     avatar:
      //       "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      // ];
      //从后端获取
      axios
        .get("/api/FriendList", {
          params: {
            token: store.getters.CurrentUser.token,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage("成功获取好友列表");
            if (res.data.list !== null) friendList.value = res.data.data.list;
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("获取好友列表失败");
        });
    };

    //搜索用户
    const addFriendVisable = ref(false);
    const addName = ref("");
    const addFriendCard = ref([]);
    const searchFriend = () => {
      if (addName.value === "") {
        ElMessage("名字不能为空！");
        return;
      }

      axios
        .get("/api/UsersList", {
          params: {
            token: store.getters.CurrentUser.token,
            name: addName.value,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            if (res.data.data.list !== []) {
              ElMessage("找到用户");
              addFriendCard.value = res.data.data.list;
            } else ElMessage("未找到可添加用户");
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("搜索失败");
        });

      // addFriendCard.value = [
      //   {
      //     name: "haha",
      //     avatar:
      //       "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      //   {
      //     name: "haha",
      //     avatar:
      //         "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      //   {
      //     name: "haha",
      //     avatar:
      //         "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      //   {
      //     name: "haha",
      //     avatar:
      //         "https://cdn.learnku.com/uploads/images/201710/14/1/s5ehp11z6s.png",
      //   },
      // ];
    };

    //发送请求
    const addFriend = (item) => {
      if (addFriendCard.value === []) return;

      axios
        .post(
          "/api/FriendRequest",
          {
            f_id: item.id,
            information: "Hello",
          },
          {
            params: {
              token: store.getters.CurrentUser.token,
            },
          }
        )
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage("发送成功");
          } else if (res.data.code === 500) {
            ElMessage("请勿重复添加");
          } else if (res.data.code === 401) {
            ElMessage(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("请求失败");
        });
      // friendList.value.push({
      //   id: "",
      //   name: "New Friend",
      //   avatar: "",
      // });
    };

    //查看请求
    const requestFriendVisable = ref(false);
    const requestFriendCard = ref([]);
    const getFriendRequest = () => {
      requestFriendCard.value = []; //清空上一次记录
      requestFriendVisable.value = true;

      axios
        .get("/api/FriendRequest", {
          params: {
            token: store.getters.CurrentUser.token,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage("获取成功");
            requestFriendCard.value = res.data.data;
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("查看失败");
        });
    };

    //回应
    const byFriendRequest = (item) => {
      axios
        .post(
          "/api/ByFriendRequest",
          {
            id: item.id, //id为 请求 的id，不是用户的id
            status: "1",
          },
          {
            params: {
              token: store.getters.CurrentUser.token,
            },
          }
        )
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage("回应成功");
          } else if (res.data.code === 500) {
            ElMessage(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("回应失败");
        });
    };

    //修改好友备注
    const newFriendNote = ref("");
    const updateFriendNote = (friend) => {
      axios
        .post(
          "/api/UpdateFriendNote",
          {
            id: friend.id, //id为 请求 的id，不是用户的id
            note: newFriendNote.value,
          },
          {
            params: {
              token: store.getters.CurrentUser.token,
            },
          }
        )
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage("修改成功");
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("修改失败");
        });
    };

    //删除好友
    const removeFriend = (friend) => {
      axios
        .post(
          "/api/RemoveFriend",
          {
            id: friend.id, //id为 请求 的id，不是用户的id
          },
          {
            params: {
              token: store.getters.CurrentUser.token,
            },
          }
        )
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage("删除成功");
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("删除失败");
        });
    };

    //创建群组
    const createGroup = () => {
      axios
        .get("/api/CreateGroup", {
          params: {
            user_id: "33",
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage("创建成功");
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("创建失败");
        });
    };

    //聊天
    const chat = (friend) => {
      //创建与好友的会话
      //检索selfSessionList是否已存在该会话
      store.commit("CHAT", friend);
      //如果没有，则@me 创建新会话 sessionId = userId
    };

    onMounted(getFriendList);

    return {
      friendList,
      getFriendList,
      searchFriend,
      addFriend,
      addFriendCard,
      addFriendVisable,
      addName,
      chat,
      getFriendRequest,
      requestFriendCard,
      requestFriendVisable,
      byFriendRequest,
      updateFriendNote,
      removeFriend,
      createGroup,
    };
  },
};
</script>
